<template>
  <div class="dashboard">
    <a-row class="panels" :gutter="16">
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#1890ff" title="产品管理" :num="nums.pro">
          <proSvg />
        </Panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#52c41a" title="Banner管理" :num="nums.banner">
          <Banner />
        </Panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#fa8c16" title="关于我们" :num="nums.about">
          <About />
        </Panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#f5222d" title="用户" :num="nums.users">
          <Users />
        </Panel>
      </a-col>
    </a-row>
    <!-- <hr /> -->
    <EchartsLine />
    <a-row>
      <a-col :span="12">
        <EchartsLine />
      </a-col>
      <a-col :span="12">
        <EchartsLine />
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import Panel from "@/components/panel.vue";
import * as countsApi from "@/api/dashboard";
import EchartsLine from "./echartsLine";
import proSvg from "@/assets/svg/pro.svg";
import Banner from "@/assets/svg/banner.svg";
import About from "@/assets/svg/about.svg";
import Users from "@/assets/svg/users.svg";

const keys = Object.keys(countsApi).map((item) =>
  item.slice(3, item.length - 6).toLowerCase()
);
const nums = ref({});
const getCountApi = () => {
  const arr = Object.values(countsApi);
  return Promise.all(arr.map((item) => item()));
};
//获取数据
getCountApi().then((res) => {
  const obj = {};
  keys.forEach((item, index) => {
    obj[item] = res[index];
  });
  nums.value = obj;
});
</script>

<style scoped>
.panels {
  padding: 20px;
}
.dashboard {
  background-color: #f0f2f5;
}
.gutter-row {
  margin: 10px 0;
}
</style>
